<template>
  <div class="dashboard-container">
    <div class="dashboard-container">
    <Card style="margin: 15px">
      <!-- 头部操作 -->
      <Row>
        <Col span="7">
          <Row :wrap="false" justify="space-around" type="flex">
            <Input v-model="params.title" placeholder="根据用户名搜索" />
            <Button style="margin: 0 10px 0 10px" @click="emptyBtn">清空</Button>
            <Button type="primary" @click="SearchBtn">搜索</Button>
          </Row>
        </Col>
        <Col span="17">
          <Row justify="end" type="flex">
            <Button type="success" @click="addUserBtn">新增用户</Button>
          </Row>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <dataBar>
            <span slot="before">共{{counts}}条数据</span>
          </dataBar>
        </Col>
      </Row>
      <!-- 新增弹出层 -->
        <PermissionAdd :isShow.sync="isShow" @addEvent="sonAddEvent"></PermissionAdd>

        <!-- 编辑弹出层 -->
        <EditorAdd :keyArr="treeArr" :treeInfo="treeInfo" :isShow.sync="editorShow" :rowData="rowData"></EditorAdd>
      <!-- 表格 -->
      <Table :columns="columns" :data="permissionsList">
        <template slot-scope="{ row }" slot="name">
          <span>{{ row.name  }}</span>
        </template>
        <template slot-scope="{ row }" slot="operation">
           <Button type="success" shape="circle" class="button" style="backgroundColor:#00CED1" @click="editorBtn(row)">
             <Icon type="ios-create" style="color:#fff;" :size="20" />
           </Button>
           <Button type="error" shape="circle" style="margin-left:10px;backgroundColor:#FF4500" class="button" @click="delBtn(row)">
             <Icon type="ios-trash-outline" style="color:#fff" :size="20"/>
           </Button>
        </template>
      </Table>
      <!-- 页码 -->
      <Row style="margin-top: 10px" type="flex" justify="center">
        <PageTool :params="params" :counts="counts" @pageChange="pageChange" @pagesizeChange="pagesizeChange"></PageTool>
      </Row>
    </Card>
  </div>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/base/permissions'
import { menusList } from '@/api/base/menus.js'
import PageTool from '../components/page-tool'
import moment from 'moment' // 时间戳格式化
import dataBar from '../components/dataBar.vue'
import PermissionAdd from '../components/permissions-add.vue'
import EditorAdd from '../components/permissionsApi-add.vue'
export default {
  components: {
    PageTool,
    dataBar,
    PermissionAdd,
    EditorAdd
  },
  data () {
    return {
      treeInfo: [],
      treeArr: [], // 树型空间的id数据
      rowData: {}, // 插槽row数据
      // isOpen: false, // 是否--选择框
      isShow: false, // 控制对话框
      editorShow: false, // 控制编辑对话框
      permissionsList: [], // 权限列表数据
      // 分页控制
      params: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      counts: 0,
      columns: [
        {
          title: '全选',
          type: 'selection',
          align: 'center',
          maxWidth: 100
        },
        {
          title: '用户名',
          key: 'title',
          align: 'center'
        },
        {
          title: '日期',
          key: 'create_date',
          sortable: true,
          align: 'center',
          render: function (h, params) {
            return h('div',
              moment(params.row.create_date).format('yyyy-MM-DD'))/* 这里的this.row能够获取当前行的数据 */
          }
        },
        {
          title: '操作',
          slot: 'operation',
          align: 'center'
        }
      ]
    }
  },
  created () {
    this.list()
    this.menusList()
  },
  methods: {
    async menusList () {
      const res = await menusList()
      console.log(res)
      this.treeInfo = res.data
    },
    async list () {
      const { data } = await list(this.params)
      // console.log(data)
      this.counts = data.counts
      this.permissionsList = data.list
    },
    pagesizeChange (num) {
      this.params.pagesize = num
      this.list()
    },
    pageChange (num) {
      this.params.page = num
      this.list()
    },
    // 编辑按钮
    async editorBtn (row) {
      console.log(row)
      const { data } = await detail(row)
      console.log(data)
      this.treeArr = data.permissions
      this.menusList()
      this.editorShow = true
      this.rowData = row
    },
    // 删除按钮
    async delBtn (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '您确定的永久性删除这条信息吗？',
        onOk: async () => {
          // console.log(row)
          await remove(row)
          this.list()
          this.$Message.info('删除成功')
        },
        onCancel: () => {
          this.$Message.info('取消操作')
        }
      })
    },
    // 新增按钮
    async addUserBtn () {
      this.isShow = true
    },
    sonAddEvent (result) {
      this.list()
    },
    // 清空按钮
    emptyBtn () {
      this.params.title = ''
      this.list()
    },
    // 搜索按钮
    SearchBtn () {
      this.list()
    }
  }
}
</script>
<style lang="scss" scoped>
.button {
  padding: 9px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
